// 获取滑块、生成按钮、图片数量显示元素、右侧面板、错误信息元素
const slider = document.querySelector(".slider");
const generateButton = document.querySelector(".generate-button");
const imageCountSpan = document.getElementById("imageCount");
const rightPanel = document.querySelector(".right-panel");
const errorMessage = document.querySelector(".error-message");
const sliderDots = document.querySelectorAll(".slider-dot");

function updateSliderDots(value) {
  sliderDots.forEach((dot, index) => {
    if (index < value) {
      dot.style.backgroundColor = "#007bff"; // Blue
    } else {
      dot.style.backgroundColor = "#bbb"; // Gray
    }
  });
}

// 初始化图片数量为滑块的值
imageCountSpan.innerText = slider.value;
// 初始化绘画风格和文本
let imageCount = slider.value;
let selectedText = "";

// 监听滑块值变化事件
slider.addEventListener("input", () => {
  imageCount = slider.value;
  // 更新显示的图片数量
  imageCountSpan.innerText = slider.value;
  updateSliderDots(Number(imageCount));
});

// 监听绘画文本输入事件
const textarea = document.querySelector("textarea");
textarea.addEventListener("input", () => {
  selectedText = textarea.value;
  // 如果文本不为空，隐藏错误信息
  if (selectedText) {
    errorMessage.style.display = "none";
  }
});

// 监听生成按钮点击事件
generateButton.addEventListener("click", () => {
  // 获取生成的图片数量
  // 如果文本为空，显示错误信息并返回
  if (!selectedText) return (errorMessage.style.display = "block");

  // 生成最佳图片的匹配数组
  imgAry = generateAndDisplayImages(imageCount, selectedText);
  console.log(imgAry);
  // 渲染 DOM
  let str = ``;
  imgAry.forEach((el) => {
    str += `
          <img src='${el.imageUrl}' />
        `;
  });
  rightPanel.innerHTML = str;
});

// 假设生成的绘画数据数组为 artDataArray
const artDataArray = [
  { imageUrl: "images/img1.jpg", tags: "知更鸟、湖蓝色、十分可爱、皮克斯渲染" },
  { imageUrl: "images/img2.jpg", tags: "知更鸟、个性的眉毛、模糊毛皮" },
  { imageUrl: "images/img3.jpg", tags: "知更鸟、剪纸风格、个性的眉毛" },
  { imageUrl: "images/img4.jpg", tags: "知更鸟、油画、十分可爱、特殊的羽毛" },
  { imageUrl: "images/img5.jpg", tags: "男性、卡通、书、桌子" },
  { imageUrl: "images/img6.jpg", tags: "男性、卡通、玩具、眼镜" },
  { imageUrl: "images/img7.jpg", tags: "男性、卡通、玩具" },
  { imageUrl: "images/img8.jpg", tags: "男性、卡通、书" },
  { imageUrl: "images/img9.jpg", tags: "沙滩、遮阳伞、散步" },
  { imageUrl: "images/img10.jpg", tags: "沙滩、椰子树、一群人" },
  { imageUrl: "images/img11.jpg", tags: "沙滩、遮阳伞、人、包" },
  { imageUrl: "images/img12.jpg", tags: "沙滩、回忆、相框" },
];

/**
 * @param {*} imageCount 生成的图片数量
 * @param {*} selectedText 用户输入的文本
 */
function generateAndDisplayImages(imageCount, selectedText) {
  let imgAry = []; // 定义最佳匹配的图片数组
  // TODO：待补充代码
  let piPeiDu = 0;
  artDataArray.forEach((item) => {
    let tags = item.tags.split("、");
    tags.forEach((tag) => {
      if (selectedText.includes(tag)) {
        piPeiDu++;
      }
    });
    item["piPeiDu"] = piPeiDu;
    piPeiDu = 0;
  });
  artDataArray.sort((a, b) => {
    return b.piPeiDu - a.piPeiDu;
  });
  imgAry = artDataArray.slice(0, imageCount);
  //TODO：END
  return imgAry;
}
